<!--
 * @Author: ujjldn ujjldn0515@163.com
 * @Date: 2025-06-24 18:59:16
 * @LastEditors: ujjldn ujjldn0515@163.com
 * @LastEditTime: 2025-06-24 22:14:18
 * @FilePath: \g-table1\src\components\search-select-options-input.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="width: 100%">
    <el-table :data="options" border style="width: 100%">
      <el-table-column prop="label" label="Label">
        <template #default="scope">
          <el-input v-model="scope.row.label"  @input="onLabelInput(scope.row)" />
        </template>
      </el-table-column>

      <el-table-column prop="value" label="Value">
        <template #default="scope">
          <el-input-tag v-if="scope.row.label==='pageSizes' || Array.isArray(scope.row.value)" 
              v-model="scope.row.value" 
              clearable 
              draggable
              tag-type="primary"
              tag-effect="plain" 
              title="回车确认标签" 
              />
          <el-switch v-else-if="isBooleanString(scope.row.value)" v-model="scope.row.value" />
          <el-input v-else v-model="scope.row.value" />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="110">
        <template #default="scope">
          <el-button
            type="danger"
            @click="removeOption(scope.$index)"
            plain
            :icon="Delete"           
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button @click="addOption" type="primary" :icon="Plus" plain>添加新项</el-button>
  </div>
</template>

<script setup>
import { Plus, Delete } from '@element-plus/icons-vue'
import {isBooleanString} from '@/utils/utils'

const props = defineProps({
	options: { 
		type: Array,
		required: true, 
		default: () => [ 
			 { label: '选项1', value: '1' },
       { label: '选项2', value: '2' }
		]
	}
})

// 添加新项
const addOption = () => {
  props.options.push({ label: '', value: '' })
}

// 删除某一项
const removeOption = (index) => {
  props.options.splice(index, 1)
}

// 当 label 被修改时处理 value 类型
const onLabelInput=(row)=> {
  if (row.label === 'pageSizes') {
    if (!Array.isArray(row.value)) {
      row.value = []
    }
  }
}
</script>

<style scoped>

</style>